<template>
    <div class="m_right">
        <p></p>
        <div class="mem_tit">修改密码</div>
        <div>

            <form>
                <p>
                    <label>原密码：</label>
                    <input name="oldPassword" type="password" v-model="oldPassword" @blur="checkOldPassword">
                    <span style="color: red;">{{ oldPasswordError }}</span>
                </p>
                <p>
                    <label>新密码：</label>
                    <input name="newPassword" type="password" v-model="newPassword" @blur="checNewPassword">
                    <span style="color: red;;">{{ newPasswordError }}</span>
                </p>
                <button @click.prevent="updatePassword()">提交</button>
                <button @click.prevent="back()">取消</button>
            </form>
        </div>

    </div>
</template>

<script>

export default {
    name: 'UpdatePasswordRight',
    data() {
        return {
            user: null,
            id: '',
            oldPassword: '',
            newPassword: '',
            oldPasswordError: '',
            newPasswordError: ''
        }
    },
    methods: {
        checkOldPassword() {
            if (this.oldPassword == '') {
                this.oldPasswordError = '旧密码不能为空！'
                return false
            }
            if (this.oldPassword.length > 9 || this.oldPassword.length < 6) {
                this.oldPasswordError = '密码长度6-9位！'
                return false
            }
            this.$axios({
                url: '/checkPassword',
                method: 'post',
                data: {
                    id: this.id,
                    password: this.oldPassword
                },
                headers: {
                    'content-type': 'application/json'
                }
            }).then(rs => {
                if (rs.data.code == 5200 || rs.data.code == '5200') {
                    this.oldPasswordError = ''
                    return true;
                } else {
                    this, this.oldPasswordError = '原密码不对！'
                    return false
                }
            })
        },
        checNewPassword() {
            console.log("=======", this.newPassword)
            if (this.newPassword == '') {
                this.newPasswordError = '新密码不能为空！'
                return false
            }
            if (this.newPassword.length > 9 || this.newPassword.length < 6) {
                this.newPasswordError = '密码长度6-9位！'
                return false
            }
            console.log("=======", this.newPassword)
            this.newPasswordError = ''
            return false
        },
        updatePassword() {
            if (this.checkOldPassword() && this.checNewPassword()) {
                this.$axios({
                    url: 'updateUser',
                    method: 'post',
                    data: {
                        id: this.id,
                        password: this.newPassword
                    },
                    headers: {
                        'content-type': 'application/json'
                    }
                }).then(rs => {
                    if (rs.data.code == 5200 || rs.data.code == '5200') {
                        alert('修改成功！请重新登录！')
                        window.sessionStorage.removeItem('jwtToken');
                        window.sessionStorage.removeItem('userId');
                        window.sessionStorage.removeItem('userType');
                        window.sessionStorage.removeItem('userName');
                        this.$router.push('/login')
                    } else {
                        alert('修改失败！')
                    }
                })
            }
        },
        back() {
            history.back(-1)
        }

    },
    mounted() {
        this.id = window.sessionStorage.getItem('userId')
    }
}
</script>

<style scoped>
form {
    width: 300px;
    margin: 30px auto;
    font-family: Arial, sans-serif;
}

p {
    margin-bottom: 15px;
}

label {
    display: inline-block;
    width: 80px;
    font-size: 14px;
}

input {
    width: 200px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    margin-right: 10px;
    padding: 6px 12px;
    border: 1px solid #999;
    border-radius: 4px;
    background: #f5f5f5;
    cursor: pointer;
}

button:hover {
    background: #e0e0e0;
}

span {
    font-size: 12px;
}
</style>
